<template>
    <div>
   <h1>显示页面</h1>
    </div>
    <table class="table">

        <thead>
             <tr>
                <td>折扣券名称</td>
                <td>手机号</td>
                <td>地址</td>
                <td>时间</td>
                <td>状态</td>
                <td>用户</td>
                <td>操作</td>
             </tr>

        </thead>
            <tbody>
             <tr v-for="a in data">
                <td>{{a.steateName}}</td>
                <td>{{a.phone}}</td>
                <td>{{a.adds}}</td>
                <td>{{a.steateTime}}</td>
                <td>{{a.state}}</td>
                <td>{{a.userMagerName}}</td>
                <td>
                    <input type="button" value="删除" @click="deletee(a.steateId)">
                </td>
             </tr>
        </tbody>
    </table>
   

     一共{{pangs.count}}条，每页显示{{yes.size}}条，一共显示{{pangs.mumber}}页，当前第{{yes.index}}页

     <input type="button" value="首页" @click="pangh(1)">    
     <input type="button" value="上页" @click="pangh(2)">   
     <input type="button" value="下页" @click="pangh(3)">   
     <input type="button" value="尾页" @click="pangh(4)">   
   

    <input type="munbr" v-model="yes.index" style="width:30px;height:30px;" ><input type="button" value="跳转" @click="sk()">
     <select v-model="yes.size" @change="yeyi()">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
     </select>


</template>

<script setup lang="ts">
 import axios from 'axios';
  import{ref,onUnmounted} from 'vue';
   
   import {useRouter} from 'vue-router';
    const router=useRouter();
 

    onUnmounted(()=>{

         Show();

    })

    const sk=()=>{
        
         if(yes.value.index<pangs.value.mumber){
             alert("无效")
         }
            Show();

    }
    
    const deletee=(steateId:any)=>{
         axios.delete("http://localhost:5025/api/Steate/DeleteAnync?id="+steateId).then(res=>{
             if(res.data>0){
                
                 alert("删除成功")
                 Show();

             }else{
                 alert("删除失败")
             }
         })
    }
  const data=ref([{

     "userMagerId": 1,
      "steateName": "玩具",
      "steateTime": "0020-02-05T00:00:00",
      "state": 1,
      "adds": "江西省",
      "phone": "15301201201",
      "userMagerName": "admin",
      "steateId": 1

  }])

   const pangh=(val:any)=>{
        if(val==1){
              yes.value.index=1
              Show();
        }

         if(val==2&&yes.value.index>pangs.value.count){
       yes.value.index--;
          Show();
         }

   if(val==3&&yes.value.index<pangs.value.count){
    yes.value.index++;
       Show();
   }

  if(val==4){
    yes.value.index=pangs.value.mumber;
     
  }
     Show();
   }

    const yeyi=()=>{
          Show();

    }



 const pangs=ref({

  count:0,
  mumber:0,

 })

     const yes=ref({

  index:1,
  size:2,


         
     })
       const Show=()=>{

         axios.get("http://localhost:5025/api/Steate/Show",{params:yes.value}).then(res=>{


             data.value=res.data.mumber;

            pangs.value.count=res.data.count;

             pangs.value.mumber=Math.ceil(pangs.value.count / yes.value.size);

         })
       }
  

</script>

<style scoped>

</style>
